<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客登陆页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">

</head>

<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">小粮博客</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
    </div>

    <div class="container-login">
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" name="username" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" name="password" id="password">
            </div>
            <!-- <div id="confirm" style="height: 50px; margin-top: 20px; "> -->
            <div class="row">
                <span>验证码</span>
                <input type="text" name="inputCaptcha" id="inputCaptcha" placeholder="输入验证码"
                    style="width: 100px;height: 38px; background-color: #e3f2fd;">
                <img id="verificationCodeImg" src="/captcha/get"
                    style="cursor: pointer; width: 110px; height: 38px; border: 1px solid black;" title="看不清？换一张" />
            </div>
            <div class="row">
                <button id="submit" onclick="login()">提交</button>
            </div>

        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>

        // 点击图片，重新加载验证码
                $("#verificationCodeImg").click(function () {
                    console.log("进入验证码更新")
                    $(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();
                });
            function login() {
                $.ajax({
                    url: "/user/login",
                    type: "post",
                    data: {
                        userName: $("#username").val(),
                        password: $("#password").val(),
                        // captcha: $("#inputCaptcha").val(),

                    },
                    success: function (result) {
                        if (result.code == 200 && result.data != "") {
                            localStorage.setItem("user_token", result.data);
                            location.assign("blog_list.html");
                        } else {
                            //自己完善
                            console.log("没登陆")
                            alert(result.errMsg);
                        }
                    }
                });

            }

        // 验证码相关功能封装
        // function initCaptcha() {
        //     // 初始化验证码
        //     refreshCaptcha();

        //     // 点击刷新验证码
        //     $("#verificationCodeImg").click(function () {
        //         refreshCaptcha();
        //     });
        // }

        // // 封装刷新验证码方法
        // function refreshCaptcha() {
        //     const $img = $("#verificationCodeImg");
        //     $img.hide().attr('src', '/captcha/get?dt=' + Date.now()).fadeIn();
        // }

        // // 登录功能改造
        // async function login() {
        //     // 前端基础验证
        //     const username = $("#username").val().trim();
        //     const password = $("#password").val().trim();
        //     const captcha = $("#inputCaptcha").val().trim();

        //     if (!username || !password || !captcha) {
        //         alert("请填写完整登录信息");
        //         return;
        //     }

        //     try {
        //         // 显示加载状态
        //         $("#loginBtn").prop("disabled", true).text("登录中...");

        //         const response = await $.ajax({
        //             url: "/user/login",
        //             type: "POST",
        //             data: {
        //                 userName: username,
        //                 password: password,
        //                 captcha: captcha
        //             }
        //         });

        //         if (response.code === 200 && response.data) {
        //             // 存储token
        //             localStorage.setItem("user_token", response.data);

        //             // 验证token有效性
        //             var url = "/user/getUserInfo";
        //             const userInfo = await getUserInfo(url);

        //             // 跳转前更新页面状态
        //             updateLoginState(userInfo);
        //             location.assign("blog_list.html");
        //         } else {
        //             handleLoginError(response.errMsg);
        //         }
        //     } catch (error) {
        //         handleLoginError(
        //             error.status === 401 ? "认证失败" :
        //                 error.status === 403 ? "验证码错误" :
        //                     "网络连接异常"
        //         );
        //     } finally {
        //         // 重置按钮状态
        //         $("#loginBtn").prop("disabled", false).text("登录");
        //     }
        // }

        // // 错误处理统一封装
        // function handleLoginError(message) {
        //     alert(message || "登录失败");
        //     refreshCaptcha(); // 失败时刷新验证码
        //     $("#inputCaptcha").val(''); // 清空验证码输入框
        // }

        // // 更新登录状态
        // function updateLoginState(userInfo) {
        //     // 更新页面元素
        //     $(".left .card h3").text(userInfo.userName);
        //     $("#avatar_img").attr('src', `pic/${userInfo.avatarUrl || 'default_avatar.png'}`);

        //     // 更新全局状态
        //     window.isAuthenticated = true;
        // }

        // // 初始化
        // $(function () {
        //     initCaptcha();

        //     // 绑定回车事件
        //     $("#password, #inputCaptcha").keypress(function (e) {
        //         if (e.which === 13) login();
        //     });
        // });
    </script>
</body>

</html>